<template>
  <div>
    <div style="font-size: 12px;cursor: pointer" @click="toggleComment(log)">
      <i v-if="!log.showComment" class="el-icon-circle-plus-outline"></i>
      <i v-if="log.showComment" class="el-icon-remove-outline"></i>
      评论 （{{log.comment.length}}条评论）
    </div>
    <div class="feedback" v-if="log.showComment">
      <div v-for="c in log.comment" style="position: relative; ">
        <img class="avatar" style="position: absolute;top:3px;" :src="c.fromDingAvatar+'_60x60q90.jpg'" />
        <div style="padding-left: 50px; font-size:12px; line-height: 22px">
          <div>
            {{c.fromDingName}} {{c.createTime}}
            <span class="delc" v-if="c.fromDingUser== userInfo.dingId" @click="deleteComment(c)">
                删除
              </span>
          </div>
          <div>
            {{c.content}}
          </div>
        </div>
      </div>
      <div style="height:auto; padding-top: 10px">
        <div style="width: calc(100% - 80px); float:left;">
          <rich-editor :members="members" :data="log" :rows="1" contentKey="newComment" avatarsKey="atDingIds" placeholder="发表评论"></rich-editor>
        </div>
        <el-button size="small" style="margin-left: 5px;" @click="comment(log)" :loading="loading">发表</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import RichEditor from '@/components/ding/rich-editor'

  export default {
    data () {
      return {
        loading: false
      }
    },
    props:{
      log:{
        default: function(){
          return {
            comment:[],
            showComment:true
          }
        },
        type: Object
      },
      members: {
        default: function(){ return []},
        type: Array
      },
      userInfo: {
        default: function(){ return {}},
        type: Object
      }
    },
    components:{
      RichEditor
    },
    methods: {
      toggleComment(item){
        item.showComment=!item.showComment
        this.$forceUpdate()
      },
      comment(log){
        if(!log.newComment>''){
          return
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/wpb/projectcomment/save'),
          method: 'post',
          data: this.$http.adornData({
            content: log.newComment,
            logId: log.id,
            fromDingName: this.userInfo.realName,
            fromDingUser: this.userInfo.dingId
          })
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.log.comment.push(data.data);
              log.newComment = ''
            }
          }
        ).catch(error=>{
          console.info(error)
        }).finally(()=>{
          this.loading = false
        })
      },
      deleteComment(comment){
        let ids = [comment.id]
        this.$http({
          url: this.$http.adornUrl('/wpb/projectcomment/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
            if (data && data.code === 0) {
              this.log.comment = this.log.comment.filter(x=>x.id!=comment.id);
            }
          }
        ).catch(error=>{
          console.info(error)
        })
      }
    }
  }
</script>
<style scoped>

  #board-box{
    padding: 20px;
    margin-bottom: 40px;
    line-height: 30px;
  }

  .avatar{
    width: 36px;
    height: auto;
    margin-right: 0px;
    border-radius: 100%;
    vertical-align: middle;
  }

  i:before{
    font-size: 14px;
  }

  .feedback{
    position: relative;
    left:15px;
  }

  .delc{
    cursor: pointer; margin-left: 15px; color:gray; font-size: 10px;
  }

</style>
